<template>
  <div>
    <TitleSecondary :title="title" />
    <div id="bar-box" class="bar" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    width: {
      type: String,
      default: '300px',
    },
    height: {
      type: String,
      default: '300px',
    },
    option: {
      type: Object,
      default: () => ({}),
    },
    title: {
      type: String,
      default: '柱状图',
    },
    series: {
      type: Array,
      default: () => ([]),
    },
    xAxisData: {
      type: Array,
      default: () => ([]),
    }
  },
  data() {
    return {
      myChart: null,
    };
  },
  computed: {
    getSeries() {
      return this.series || [];
    }
  },
  watch: {},
  created() {},
  mounted() {
    this.$nextTick(() => {
      this.initBar()
      window.addEventListener('resize', this.initBar);
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.initBar);
  },
  methods: {
    initBar() {
      this.myChart = this.$echarts.init(document.getElementById('bar-box'));
      this.setOption();
      this.myChart.resize({
        // width: document.getElementById('summary').offsetWidth
      });
    },
    setOption() {
      let xAxisData = this.xAxisData;
      let data = this.series;
      // console.log(xAxisData)
      let option = {
        tooltip: this.option.tooltip,
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            rotate: 40
          }
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: data,
            type: 'bar',
            barMinHeight: 1,
            barWidth: '40%',
            barMinWidth: '30%',
            barMaxWidth: '60%',
          },
        ],
      };

      this.myChart.on('click', params => {
        console.log(params);
        this.$emit('changeRegion', params, 'pass')
      });

      option && this.myChart.setOption(option);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.container {
  margin: 0;
}
</style>
